<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <h1 class="text-center">注册</h1>
                <form id="myform">
                    {% csrf_token %}
                    {% for form in form_obj %}
                        <div class="form-group">
                         <label for="{{ form.auto_id }}">{{ form.label }}</label>
                        {{ form }}
                        <span style="color: red" class="pull-right"></span>
                        </div>

                    {% endfor %}
                    <div class="form-group">
                        <label for="myfile">头像
                        {% load static %}
                        <img src="{% static 'img/default.png' %}" id="myimg" alt="" width="100" >
                        <input type="file" id="myfile" name="avatar" style="display: none">
                        </label>
                    </div>
                    <input type="button" class="btn btn-primary pull-right" value="注册" id="id_commit">
                </form>
                
                
            </div>
        </div>
    </div>
    <script>
        $("#myfile").change(function () {
        // 文件阅读器对象
        // 1 先生成一个文件阅读器对象
        let myFileReaderObj = new FileReader();
        // 2 获取用户上传的头像文件
        let fileObj = $(this)[0].files[0];
        // 3 将文件对象交给阅读器对象读取
        myFileReaderObj.readAsDataURL(fileObj)  // 异步操作  IO操作
        // 4 利用文件阅读器将文件展示到前端页面  修改src属性
        // 等待文件阅读器加载完毕之后再执行
        myFileReaderObj.onload = function(){
             $('#myimg').attr('src',myFileReaderObj.result)
        }
    })
        $('#id_commit').click(function (){
            // 发送ajax请求     我们发送的数据中即包含普通的键值也包含文件
            let formDataObj = new FormData();
            // 1. 添加普通的键值对
            $.each($('#myform').serializeArray(),function (index,obj){
                {#console.log(index,obj)#}
                formDataObj.append(obj.name,obj.value)
            })
            // 2.添加文件数据
            formDataObj.append('avatar',$('#myfile')[0].files[0]);
            $.ajax({
                url:'',
                type:'post',
                data:formDataObj,
                 // 需要指定两个关键性的参数
            contentType:false,
            processData:false,
                success:function (args){
                    if (args.code==1000){
                        window.location.href = args.url
                    }else{
                        $.each(args.msg,function (index,obj){
                            let targetId = '#id_' + index;
                            $(targetId).next().text(obj[0]).parent().addClass('has-error')
                        })
                    }
                }
            })
        })
         // 给所有的input框绑定获取焦点事件
    $('input').focus(function () {
        // 将input下面的span标签和input外面的div标签修改内容及属性
        $(this).next().text('').parent().removeClass('has-error')
    })
    </script>
</body>
</html>